<template>
	<view class="container">
		<view class="search-param">
			<uni-search-bar placeholder="请输入客户名称" v-model="loaForm.customerName" @confirm="search" @cancel="show">
			</uni-search-bar>
		</view>

		<view>
			<uni-row>
				<uni-col :span="12">
					<view class="datetime-picker-container">
						<uni-datetime-picker v-model="loaForm.begDa" type="date" placeholder="授权开始日期"
							:format="'yyyy-MM-dd'" @change="search"></uni-datetime-picker>
					</view>
				</uni-col>
				<uni-col :span="12">
					<view class="datetime-picker-container">
						<uni-datetime-picker v-model="loaForm.endDa" type="date" placeholder="授权结束日期"
							:format="'yyyy-MM-dd'" @change="search"></uni-datetime-picker>
					</view>
				</uni-col>
			</uni-row>
		</view>

		<view v-for="(loa, index) in loaList" :key="index" class="search-results-container">
			<uni-row
				style="font-weight: bold;color: #337ab7;background-color: #f0f0f0;padding: 5px; margin-bottom: 10px;">
				<uni-col :span="18">
					<div>
						<text>客户名称：{{ loa.customerName}}</text>
					</div>
				</uni-col>
				<uni-col :span="6">
					<view>
						<button @tap="goToLoaDetailPage(loa.loaId)" class="apply-button">查看</button>
					</view>
				</uni-col>
			</uni-row>
			<div>
				<text>客户编号：{{ loa.customerId }}</text>
			</div>
			<div>
				<text>委托书ID：{{ loa.loaId }}</text>
			</div>
			<div>
				<text>授权开始：{{ formatDate(loa.bgDate) }}</text>
			</div>
			<div>
				<text>授权结束：{{ formatDate(loa.edDate) }}</text>
			</div>
			<div>
				截止天数：<text :style="{ color: daysBetween(loa.edDate, new Date()) > 0 ? '#000' : 'red' }">
					{{ daysBetween(loa.edDate, new Date()) }}
				</text>
			</div>
		</view>
	</view>
</template>

<script>
	import {
		listLoaAuth
	} from "@/api/order/loa";

	export default {
		data() {
			return {
				loaForm: {
					customerName: '',
					begDa: '',
					endDa: '',
				},
				loaList: [],
			};
		},
		methods: {
			formatDate(dateStr) {  
			      const parts = dateStr.split(' '); 
			      const dateParts = parts[0].split('-'); 
			      return `${dateParts[0]}-${dateParts[1]}-${dateParts[2]}`;   
			},
			search() {
				listLoaAuth({
					"bgDate": this.loaForm.begDa ? this.loaForm.begDa: null,
					"edDate": this.loaForm.endDa ? this.loaForm.endDa: null,
					"customerName": this.loaForm.customerName,
					"pageNum": 1,
					"pageSize": 200
				}).then(response => {
					var loaList = response.rows;
					this.loaList = loaList;
				});
			},
			show() {
				listLoaAuth({
					"params": {
						"bgDate": this.loaForm.begDa ? this.loaForm.begDa +
							" 00:00:00" : null,
						"edDate": this.loaForm.endDa ? this.loaForm.endDa + " 23:59:59" : null,
					},
					"customerName": this.loaForm.customerName,
					"pageNum": 1,
					"pageSize": 20
				}).then(response => {
					var loaList = response.rows;
					this.loaList = loaList;
				});
			},
			onLoad() {
				this.search();
			},
			daysBetween (date1,date2) {
			  const d1 = new Date(date1);
			  const d2 = date2;
			  const diff = d1.getTime() - d2.getTime();
			  return Math.round(diff / (1000 * 60 * 60 * 24));
			},
			goToLoaDetailPage(loaId) {
				uni.navigateTo({
					url: '/pages/order/loaDetail/index?loaId=' + loaId,
				});
			},
		},
	};
</script>

<style>
	.container {
		flex-direction: row;
		flex: auto;
		background-color: #fff;
		font-size: 16px;
	}

	.search-param {
		background-color: #fff;
		text-align: center;
		/* 将内容设置为居中 */
	}

	.datetime-picker-container {
		flex: 1;
		text-align: center;
		/* 将内容设置为居中 */
	}

	.search-results-container {
		display: flex;
		flex-direction: column;
		height: 200%;
		padding: 3px;
		background-color: #fff;
		border-top: 10px solid #f5f5f5;
	}

	.search-resultDetails-container {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 200%;
		padding: 3px;
		background-color: #f5f5f5;
	}

	.search-result {
		flex: 1;
		/* 使每个内部元素均等分布 */
		margin-bottom: 10px;
		/* 设置底部边距 */
		background-color: #fff;
		border-top: 4px solid #f5f5f5;
		/* 设置底部边框颜色 */
		padding: 4px;
		/* 设置内边距 */
	}

	.spacing {
		margin-right: 100px;
	}

	.right-align-1 {
		text-align: right;
	}

	.right-align-2 {
		text-align: right;
	}

	.align-left-right {
		display: flex;
		justify-content: space-between;
		margin-right: 20px;
	}

	.search-results-container div {
		padding: 3px;
	}

	.apply-button {
		font-size: 15px;
		color: #337ab7;
		margin-right: 10px;
		width: 80px;
		height: 26px;
		margin-top: 4px;
		margin-bottom: 4px;
		line-height: 26px;
		text-align: center;
		background-color: #f0f0f0;
		border-top: 0;
		border-right: 0;
		border-left: 0;
	}
</style>